<script setup lang="ts">
  import { ref, computed, watch, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { returnInventory } from '@/api/inventory-management';

  const emit = defineEmits(['updateArray']);
  const booleanStore = useBooleanStore();
  const accordingNo = ref<string>('');
  const applyEmpCode = ref<string>('');
  const batchNo = ref<string>('');
  const billNo = ref<string>('');
  const endLotNo = ref<string>('');
  const itemCode = ref<string>('');
  const productCode = ref<string>('');
  const qualityCode = ref<string>('');
  const returnDeliveryShop = ref<string>('');
  const returnReceiveShop = ref<string>('');
  const startLotNo = ref<string>('');
  // 获取今天的日期
  const today = new Date();
  // 获取明天的日期
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  const startTime = ref<string>(today.toISOString().split('T')[0]);
  const endTime = ref<string>(tomorrow.toISOString().split('T')[0]);
  const returnStatus = ref<string>('');
  const pageSize = ref<number>(10);
  const pageNumber = ref<number>(1);

  const options1 = ref([
    {
      value: '1',
      label: '编辑中',
    },
    {
      value: '2',
      label: '待接收',
    },
    {
      value: '3',
      label: '待确认',
    },
    {
      value: '4',
      label: '保管待接收',
    },
    {
      value: '5',
      label: '已驳回',
    },
    {
      value: '6',
      label: '结束',
    },
    {
      value: '7',
      label: '删除',
    },
  ]);
  // 发送搜索数据
  const returnQueryData: any = ref({
    searchParams: computed(() => ({
      itemCode: itemCode.value,
      billNo: billNo.value,
      returnDeliveryShop: returnDeliveryShop.value,
      returnReceiveShop: returnReceiveShop.value,
      productCode: productCode.value,
      batchNo: batchNo.value,
      startLotNo: startLotNo.value,
      endLotNo: endLotNo.value,
      qualityCode: qualityCode.value,
      accordingNo: accordingNo.value,
      applyEmpCode: applyEmpCode.value,
      startTime: startTime.value,
      endTime: endTime.value,
      returnStatus: returnStatus.value,
    })),
    pageParameter: computed(() => ({
      rows: pageSize.value,
      page: pageNumber.value,
    })),
  });
  // 表格数据
  async function handleSearch() {
    const newData = await returnInventory(returnQueryData.value);
    emit('updateArray', newData);
  }
  // 重置
  function reset() {
    itemCode.value = '';
    billNo.value = '';
    returnDeliveryShop.value = '';
    returnReceiveShop.value = '';
    productCode.value = '';
    batchNo.value = '';
    startLotNo.value = '';
    endLotNo.value = '';
    qualityCode.value = '';
    accordingNo.value = '';
    applyEmpCode.value = '';
    returnStatus.value = '';
    const [startDate] = today.toISOString().split('T');
    const [endDate] = tomorrow.toISOString().split('T');
    startTime.value = startDate;
    endTime.value = endDate;
    pageNumber.value = 1;
    handleSearch();
  }
  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 28) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      handleSearch();
    }
  });
  onMounted(() => {
    handleSearch();
  });
</script>

<template>
  <!-- 第一行 -->
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <div>
        <a-input
          v-model="productCode"
          placeholder="机型"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="batchNo"
          placeholder="批次"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="startLotNo"
          placeholder="起始架次"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="endLotNo"
          placeholder="截止架次"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
  </a-row>
  <!-- 第二行 -->
  <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <div>
        <a-input
          v-model="qualityCode"
          placeholder="质量编号"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="itemCode"
          placeholder="图号"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="billNo"
          placeholder="退货单号"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="returnDeliveryShop"
          placeholder="退货移交单位"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
  </a-row>
  <!-- 第三行 -->
  <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <div>
        <a-input
          v-model="returnReceiveShop"
          placeholder="退货接收单位"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="accordingNo"
          placeholder="退货依据"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-select
          v-model="returnStatus"
          allow-clear
          placeholder="退货状态"
          size="large"
        >
          <a-option
            v-for="item in options1"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-option>
        </a-select>
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="applyEmpCode"
          placeholder="申请人"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
  </a-row>
  <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <a-date-picker
        v-model="startTime"
        style="width: 100%"
        placeholder="申请日期"
        size="large"
        allow-clear
      />
    </a-col>
    <a-col :span="6">
      <a-date-picker
        v-model="endTime"
        style="width: 100%"
        placeholder="截止日期"
        size="large"
        allow-clear
      />
    </a-col>
  </a-row>
  <div class="btn-group">
    <a-button type="primary" size="large" @click="handleSearch">查询</a-button>
    <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
  </div>
</template>

<style scoped>
  .grid-demo {
    margin-top: 15px;
  }
  .btn-group {
    float: right;
    margin-top: 15px;
  }

  .btn-reset {
    margin-left: 10px;
  }
</style>
